<!-- 线索退回弹窗 -->
<template>
  <van-action-sheet
    v-bind="$attrs"
    position="bottom"
    title="线索退回"
    :closeable="false"
    round
    :close-on-click-overlay="false"
  >
    <van-form validate-first @failed="onFailed" @submit="submit">
      <van-field
        readonly
        clickable
        :value="form.seaName"
        label="选择公海"
        placeholder="请选择"
        @click="showPicker = true"
        :rules="[{ required: true }]"
        class="back-reson"
        input-align="right"
        right-icon="arrow"
        required
      />
      <van-popup v-model="showPicker" position="bottom" round>
        <van-picker
          show-toolbar
          title="选择退回公海"
          :columns="seaList"
          value-key="name"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        v-model="form.remark"
        label="退回备注"
        rows="6"
        autosize
        type="textarea"
        maxlength="100"
        show-word-limit
        placeholder="请输入"
      />
      <div class="flex" style="margin: 20px;">
        <van-button class="" round block plain native-type="button" @click="cancel">取消</van-button>
        <van-button class="ml10" round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </van-action-sheet>
</template>

<script>
import { getSeaList, userReturn } from './api'
export default {
  name: 'back',
  components: {},
  props: {
    // 当前线索Id
    leadId: '',
  },
  data() {
    return {
      // leadsId: undefined,
      form: { remark: '' },
      seaList: [],
      showPicker: false,
      showBack: true,
    }
  },
  created() {
    // this.leadsId = this.$route.query.id
    this.getSeaList()
  },
  computed: {},
  methods: {
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    submit() {
      // if (this.$route.query.id) {
      //   this.form.leadsId = +this.$route.query.id
      // }
      const toast = this.$toast.loading()
      this.form.leadId = this.leadId
      userReturn(this.form)
        .then((res) => {
          this.showConfirm = false
          this.cancel()
          this.$emit('success')
          this.$toast.success('操作成功')
        })
        .finally(() => {
          toast.clear()
        })
    },
    // 获取公海列表
    getSeaList() {
      getSeaList().then((res) => {
        this.seaList = res.data
      })
    },
    onConfirm(row, index) {
      this.form.seaId = row.id
      this.form.seaName = row.name
      this.showPicker = false
    },
    cancel() {
      this.$emit('input', false)
      // this.$router.replace({ name: 'highSeasDetail', query: this.$route.query })
    },
  },
}
</script>

<style lang="less" scoped></style>
